<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->

		<!--扁平图标start-->
		<link href="../../libs/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
		<!--扁平图标end-->
		<style>
			.fa-ul {
				margin-left: 40px;
			}
			
			.fa-li {
				left: -50px;
			}
			
			a:hover {
				text-decoration: none;
			}
			
			
		</style>
	</head>

	<body>
		<div class="page_content">
		
			<table class="tableStyle">
				<tr>
					<th>
						fontawsome图标不支持IE7
					</th>
				</tr>
				<tr>
					<td>

						<div class="groupTitle"><span>基本图标</span></div>

						<i class="fa fa-camera-retro"></i></td>
				</tr>
				<tr>
					<td>

						<div class="groupTitle"><span>放大1-5倍</span></div>
						<i class="fa fa-camera-retro fa-lg"></i> fa-lg
						<i class="fa fa-camera-retro fa-2x"></i> fa-2x
						<i class="fa fa-camera-retro fa-3x"></i> fa-3x
						<i class="fa fa-camera-retro fa-4x"></i> fa-4x
						<i class="fa fa-camera-retro fa-5x"></i> fa-5x</td>
				</tr>
				<tr>
					<td>

						<div class="groupTitle"><span>自定义放大</span></div>
						<i class="fa fa-camera-retro" style="font-size:24px;"></i>设置字体大小改变图标尺寸</td>
				</tr>
				<tr>
					<td>
					<div class="groupTitle"><span>自定义颜色</span></div>
					<i class="fa fa-camera-retro" style="font-size:24px;color:red;"></i>设置字体颜色</td>
				</tr>
				<tr>
					<td>

						<div class="groupTitle"><span>图标横排</span></div>
						<div>
							<a href="#"><i class="fa fa-fw fa-book fa-lg"></i>详细&nbsp; </a>
							<a href="#"><i class="fa fa-fw fa-pencil fa-lg"></i>修改&nbsp; </a>
							<a href="#"><i class="fa fa-fw fa-trash-o fa-lg"></i>删除&nbsp; </a>
						</div>

						<div>
							<a href="#"><i class="fa fa-fw fa-book fa-lg" title="详细"></i></a>
							<a href="#"><i class="fa fa-fw fa-pencil fa-lg" title="修改"></i></a>
							<a href="#"><i class="fa fa-fw fa-trash-o fa-lg" title="删除"></i></a>
						</div>
					</td>
				</tr>
				<tr>
					<td>

						<div class="groupTitle"><span>图标纵排，统一图标宽度	</span></div>
						<div>
							<a href="#"><i class="fa fa-home fa-fw fa-2x"></i>&nbsp; 首页</a><br/>
							<a href="#"><i class="fa fa-book fa-fw fa-2x"></i>&nbsp; 查阅</a><br/>
							<a href="#"><i class="fa fa-pencil fa-fw fa-2x"></i>&nbsp; 修改</a><br/>
							<a href="#"><i class="fa fa-cog fa-fw fa-2x"></i>&nbsp; 设置</a>
						</div>
					</td>
				</tr>
				<tr>
					<td>

						<div class="groupTitle"><span>列表模式</span></div>

						<ul class="fa-ul">
							<li><i class="fa-li fa fa-home fa-2x"></i>首页</li>
							<li><i class="fa-li fa fa-book fa-2x"></i>查阅</li>
							<li><i class="fa-li fa fa-pencil fa-2x"></i>修改</li>
							<li><i class="fa-li fa fa-cog fa-2x"></i>设置</li>
						</ul>

					</td>
				</tr>
				<tr>
					<td>
						<div style="width:280px;">
							<br/>
							<div class="groupTitle"><span>引用效果</span></div>

							<i class="fa fa-quote-left fa-4x pull-left fa-border"></i> 如果需要支持IE7，那真的十分抱歉。Font Awesome从4.1.0版本开始不再支持IE7， 但更早的版本仍然支持。您可以查看 3.2.1 的IE7支持说明。 然后呢，您可以去找那个非要支持IE7的人算账 :)
						</div>

					</td>
				</tr>
				<tr>
					<td>

						<div class="groupTitle"><span>加载效果</span></div>

						<div style="font-size:30px;">

							<i class="fa fa-spinner"></i>
							<i class="fa fa-spinner fa-spin"></i>
							<i class="fa fa-circle-o-notch fa-spin"></i>
							<i class="fa fa-refresh fa-spin"></i>
							<i class="fa fa-cog fa-spin"></i>
							<i class="fa fa-spinner fa-pulse"></i>
						</div>

					</td>
				</tr>
				<tr>
					<td>
						<br>
						<div class="groupTitle"><span>图标组合</span></div>

						<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span> 正常组合
						<br>
						<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span> 颜色翻转
						<br>
						<span class="fa-stack fa-lg" style="font-size:34px;">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-user fa-stack-1x fa-inverse"></i>
</span> 自定义尺寸
						<br>
						<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x red"></i>
</span> 自定义颜色
					</td>
				</tr>

				<tr>
					<td>

						<div class="groupTitle"><span>图标组合案例1</span></div>

						<div>
							<table style="border:0;">
								<tr>
									<td style="border:0;">
										<a>
											<span class="fa-stack fa-lg" style="font-size:34px;">
			  <i class="fa fa-circle fa-stack-2x" style="color:#007657;"></i>
			  <i class="fa fa-user fa-stack-1x fa-inverse"></i>
			</span>
										</a>
									</td>
									<td style="border:0;">
										<div style="font-weight:bold;font-size:14px;">2</div>
										<div style="font-size:14px;">待审核用户</div>
									</td>
									<td style="border:0;">
										<a>
											<span class="fa-stack fa-lg" style="font-size:34px;">
			  <i class="fa fa-circle fa-stack-2x" style="color:#114982;"></i>
			  <i class="fa fa-tags fa-stack-1x fa-inverse"></i>
			</span>
										</a>
									</td>
									<td style="border:0;">
										<div style="font-weight:bold;font-size:14px;">5</div>
										<div style="font-size:14px;">标记内容</div>
									</td>
									<td style="border:0;">
										<a>
											<span class="fa-stack fa-lg" style="font-size:34px;">
			  <i class="fa fa-circle fa-stack-2x" style="color:#e6975e;"></i>
			  <i class="fa fa-calendar fa-stack-1x fa-inverse"></i>
			</span>
										</a>
									</td>
									<td style="border:0;">
										<div style="font-weight:bold;font-size:14px;">23</div>
										<div style="font-size:14px;">日程处理</div>
									</td>
									<td style="border:0;">
										<a>
											<span class="fa-stack fa-lg" style="font-size:34px;">
			  <i class="fa fa-circle fa-stack-2x" style="color:#ba73b7;"></i>
			  <i class="fa fa-credit-card fa-stack-1x fa-inverse"></i>
			</span>
										</a>
									</td>
									<td style="border:0;">
										<div style="font-weight:bold;font-size:14px;">55</div>
										<div style="font-size:14px;">银行卡绑定</div>
									</td>
									<td style="border:0;">
										<a>
											<span class="fa-stack fa-lg" style="font-size:34px;">
			  <i class="fa fa-circle fa-stack-2x" style="color:#725a94;"></i>
			  <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
			</span>
										</a>
									</td>
									<td style="border:0;">
										<div style="font-weight:bold;font-size:14px;">8</div>
										<div style="font-size:14px;">未读邮件</div>
									</td>
									<td style="border:0;">
										<a>
											<span class="fa-stack fa-lg" style="font-size:34px;">
			  <i class="fa fa-circle fa-stack-2x" style="color:#ae504f;"></i>
			  <i class="fa fa-usd fa-stack-1x fa-inverse"></i>
			</span>
										</a>
									</td>
									<td style="border:0;">
										<div style="font-weight:bold;font-size:14px;">355</div>
										<div style="font-size:14px;">待收货款</div>
									</td>
								</tr>
							</table>
						</div>

						<div class="groupTitle"><span>图标组合案例2</span></div>
						<div>
							<table style="border:0;">
									<tr>
										<td style="border:0;">
											<a>
											<span class="fa-stack" style="font-size:38px;">
											  <i class="fa fa-stop fa-stack-2x" style="color:#1b96d1"></i>
											  <i class="fa fa-ambulance fa-stack-1x" style="color:#ffffff"></i>
											</span>
											</a>
										</td>
										<td style="border:0;">
											<a>
											<span class="fa-stack" style="font-size:38px;">
											  <i class="fa fa-stop fa-stack-2x" style="color:#ee4d91"></i>
											  <i class="fa fa-automobile fa-stack-1x" style="color:#ffffff"></i>
											</span>
											</a>
										</td>
										<td style="border:0;">
											<a>
											<span class="fa-stack" style="font-size:38px;">
											  <i class="fa fa-stop fa-stack-2x" style="color:#e95b19"></i>
											  <i class="fa fa-bicycle fa-stack-1x" style="color:#ffffff"></i>
											</span>
											</a>
										</td>
										<td style="border:0;">
											<a>
											<span class="fa-stack" style="font-size:38px;">
											  <i class="fa fa-stop fa-stack-2x" style="color:#fb9527"></i>
											  <i class="fa fa-bus fa-stack-1x" style="color:#ffffff"></i>
											</span>
											</a>
										</td>
										<td style="border:0;">
											<a>
											<span class="fa-stack" style="font-size:38px;">
											  <i class="fa fa-stop fa-stack-2x" style="color:#45db1a"></i>
											  <i class="fa fa-fighter-jet fa-stack-1x" style="color:#ffffff"></i>
											</span>
											</a>
										</td>
										<td style="border:0;">
											<a>
											<span class="fa-stack" style="font-size:38px;">
											  <i class="fa fa-stop fa-stack-2x" style="color:#ebcf0a"></i>
											  <i class="fa fa-motorcycle fa-stack-1x" style="color:#ffffff"></i>
											</span>
											</a>
										</td>
										<td style="border:0;">
											<a>
											<span class="fa-stack" style="font-size:38px;">
											  <i class="fa fa-stop fa-stack-2x" style="color:#17d5ed"></i>
											  <i class="fa fa-plane fa-stack-1x" style="color:#ffffff"></i>
											</span>
											</a>
										</td>
										<td style="border:0;">
											<a>
											<span class="fa-stack" style="font-size:38px;">
											  <i class="fa fa-stop fa-stack-2x" style="color:#16bcec"></i>
											  <i class="fa fa-rocket fa-stack-1x" style="color:#ffffff"></i>
											</span>
											</a>
										</td>
										<td style="border:0;">
											<a>
											<span class="fa-stack" style="font-size:38px;">
											  <i class="fa fa-stop fa-stack-2x" style="color:#9e41cd"></i>
											  <i class="fa fa-space-shuttle fa-stack-1x" style="color:#ffffff"></i>
											</span>
											</a>
										</td>
										<td style="border:0;">
											<a>
											<span class="fa-stack" style="font-size:38px;">
											  <i class="fa fa-stop fa-stack-2x" style="color:#3e50ce"></i>
											  <i class="fa fa-subway fa-stack-1x" style="color:#ffffff"></i>
											</span>
											</a>
										</td>
									</tr>
							</table>
						</div>

					</td>


				</tr>
				<tr>
					<td>

						<div class="groupTitle"><span>与按钮组合</span></div>

						<button type="button"><i class="fa fa-save fa-lg fa-fw"></i>保存</button>

						<button type="button"><i class="fa fa-trash-o fa-lg fa-fw"></i>删除</button>

						<button type="button"><i class="fa fa-search fa-lg fa-fw"></i>查询</button>

						<button type="button"><i class="fa fa-pencil fa-lg fa-fw"></i>编辑</button>

						<button type="button"><i class="fa fa-check fa-lg fa-fw"></i>提交</button>

						<button type="button"><i class="fa fa-eraser fa-lg fa-fw"></i>重置</button>

						<button type="button"><i class="fa fa-circle-o-notch fa-spin fa-lg fa-fw"></i>提交中</button>
						<br />
					</td>
				</tr>

			</table>

			
	</body>
</div>
</html>